<template>
  <div class="action-component">
    <ul v-if="action">
      <!--<li class="collect" v-show="collectStatus" :class="action.collected ? 'highlight' : ''" @click="onCollect">-->
      <!--<li class="transmit" v-show="transmitStatus"  @click="onTransmit">-->

      <li class="collect" v-show="action.collectStatus" :class="action.collected ? 'highlight' : ''" @click="onCollect">&nbsp</li>
      <li class="transmit" v-show="action.transmitStatus"  @click="onTransmit">&nbsp</li>

      <li class="heart" :class="action.likeDone ? 'highlight' : ''" @click="toggleLike">{{ action.likeCount }}
      </li>
      <li class="share" @click="onClickShare(action.shareUrl)">
        {{ action.shareCount }}
        <div class="share-popup">
          <share v-if="share && share.show"
                 :show="share.show"
                 :url="share.url"
                 :title="action.shareTitle"
                 @share="onShare"
                 @close="onCloseShare">
          </share>
        </div>
      </li>
      <li class="message" @click="onClickMessage">{{ action.messageCount }}</li>
    </ul>
  </div>
</template>



<script>
  import share from '../share/index';

  let STATUS = {
    notStart: '',
    doing: 'doing',
    done: 'done',
    fail: 'fail'
  };

  export default {
    props: {
      action: {
        type: Object,
        default: () => {
          return null;
        }
      }
    },
    components: {share},
    computed: {},
    data() {
      return {
        share: null
      };
    },
    methods: {
      userIsLogin() {
        if (!this.$_isLogin) {
          this.$_jumpToLogin({
            viewName: this.$route.name,
            query: this.$route.query || ''
          });
          return false;
        }
        return true;
      },
      toggleLike() {
        if (!this.userIsLogin()) {
          return;
        }
        if (this.action.likeActionStatus === STATUS.doing) {
          return;
        }
        this.$emit('like', this.action, !this.action.likeDone);
      },
      onCollect(type) {
        this.$emit('collect');
      },
      onTransmit(type) {
        this.$emit('transmit');
      },
      onShare(type) {
        this.$emit('share');
      },
      onCloseShare() {
        if (this.share) {
          this.share.show = false;
        }
      },
      onClickShare(shareUrl) {
        if (!this.share) {
          this.share = {
            show: true,
            url: shareUrl
          };
        } else {
          this.share.show = !this.share.show;
        }
      },
      onClickMessage() {
        this.$emit('message');
      }
    }
  };
</script>

<style scoped>
  .action-component {
    font-size: 12px;
  }


  .action::after {
    content: '';
    height: 0;
    display: block;
    clear: both;
  }

  .action-component ul {
    float: left;
  }

  .action-component ul li {
    cursor: pointer;
    float: left;
    background-repeat: no-repeat;
    background-position: left center;
    color: #ccc;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 13px;
    margin-left: 13px;
    position: relative;
  }

  .action-component ul li:after {
    content: '';
    width: 1px;
    height: 16px;
    background: #979797;
    display: block;
    position: absolute;
    right: 0;
    top: 5px;
  }

  .action-component ul li:first-child {
    margin-left: 0;
  }

  .action-component ul li:last-child {
    padding-right: 0;
  }

  .action-component ul li:last-child::after {
    display: none;
  }

  .action-component ul li.heart {
    background-image: url(./imgs/heart-gray.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
  }

  .action-component ul li.heart.highlight {
    background-image: url(./imgs/heart-red.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
  }

  .action-component ul li.share {
    position: relative;
    background-image: url(./imgs/share.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
  }

  .action-component ul li.collect {
    background-image: url(./imgs/Icon-Star1.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
     width: 20px;
  }

  .action-component ul li.collect.highlight {
    background-image: url(./imgs/Icon-Star-Fill2.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
    width: 20px;
  }

  .action-component ul li.transmit {
    background-image: url(./imgs/Shape-Share.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
    width: 20px;
  }

  .share-popup {
    position: absolute;
    z-index: 1;
    margin-top: 15px;
    left: 50%;
  }

  .action-component ul li.message {
    background-image: url(./imgs/message.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    -moz-background-size: 20px 20px;
  }

</style>
